<!DOCTYPE html>
<html class="x-admin-sm">
<#include "../layout/meta.ftl">
<body class="layui-layout-body">
<div class="layui-container" style="margin-top: 15px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>docker节点连接地址管理</legend>
    </fieldset>
    <form class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">当前地址</label>
            <div class="layui-input-inline">
                <input type="text" id="dockerUrl" name="dockerUrl" value="${dockerUrl}" lay-verify="required"
                       autocomplete="off" disabled class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux"><button type="button" class="layui-btn layui-btn-normal" data-type="updateUrl">添加地址</button></div>
        </div>
    </form>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
        </colgroup>
        <thead>
        <tr>
            <th>ID</th>
            <th>名字</th>
            <th>地址</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <#list dockerList as node>
            <tr>
                <td>${node.id}</td>
                <td>${node.name}</td>
                <td>${node.url}</td>
                <td>
                    <button onclick="change('${node.id}',1)" class="layui-btn layui-btn-normal">删除</button>
                    <button onclick="change('${node.id}',2)" class="layui-btn layui-btn-normal">设为主地址</button>
                </td>
            </tr>
        </#list>
        </tbody>
    </table>

</div>
<script>
    //JavaScript代码区域
    layui.use(['element', 'form'], function () {
        let element = layui.element, form = layui.form;
        let active = {
            updateUrl: function () {
                xadmin.open('添加地址', '/dockerUrl/addDockerUrl', 500, 200);
            }
        };
        $('.layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
    function change(id,type){
        $.ajax({
            url: "/dockerUrl/change",
            data: {id:id,type:type},
            type: "post",
            success: function (res) {
                layer.msg(res.msg);
                setTimeout(function () {
                    location.reload();
                }, 1000)
            }
        });
    }
</script>
</body>
</html>